<template>
  <el-container>
    <el-header style="border-bottom: 2px solid #dee2e7">
      <h2 style="color: #50b4ff">体格检查</h2>
      <el-radio-group v-model="tempOpen.patientInfo.sex.value" style="margin-left:50px" disabled>
        <el-radio label="男">默认检查项(男)</el-radio>
        <el-radio label="女">默认检查项(女)</el-radio>
      </el-radio-group>
    </el-header>
    <el-main style="padding: 0;height:100%">
      <div class="row-div">
        <div class="left-div">
          <span>生命体征&nbsp;<a href="javascript:void(0);" @click="chartDialog = true"><i class="el-icon-picture-outline"></i></a></span>
          <check-analysis :dialogVisible="chartDialog" />
        </div>
        <div class="middle-div">
          <span v-for="(e, i) in tempOpen.PE.items.small" :key="i">
            <span v-if="e.showFlag">{{ e.name }}<input :disabled="e.disabled" type="text" class="num-input" v-model="tempOpen.PE.values[e.code]">{{ e.unit }}</span>
          </span>
        </div>
      </div>
      <div v-for="(e, i) in tempOpen.PE.items.big" :key="i">
        <div v-if="e.showFlag" class="row-div">
          <div class="left-div">
            <span>{{ e.name }}</span>
          </div>
          <!-- <div class="middle-div" v-if="e.remark == 'children'">
            <span v-for="(ele, index) in e.children" :key="index">{{ ele.name }}<input class="num-input" style="margin-right: 0px" v-model="ele.value1" />{{ ele.valueNum == '2' ? '/' : '' }}<input v-if="ele.valueNum == '2'" class="num-input" style="margin-right: 0px" v-model="ele.value2" />{{ ele.unit }}</span>
          </div> -->
          <div class="middle-div" v-if="e._type == 'slider'">
            <el-slider
              :step="1"
              :max="e.max | toInt"
              v-model="tempOpen.PE.values[e.code]"
              show-stops>
            </el-slider>
            <span>{{ tempOpen.PE.values[e.code] }}级</span>
          </div>
          <div class="middle-div" v-if="e._type == 'textarea'">
            <el-input
              v-model="tempOpen.PE.values[e.code]"
              type="textarea"
              :rows="4"
              placeholder="请输入内容">
            </el-input>
          </div>
          <div class="middle-div" v-if="e._type == 'text'">
            <el-input v-model="tempOpen.PE.values[e.code]" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <div class="row-div">
        <el-button style="margin: 10px 20px" @click="itemShowDialog = true">编辑要素</el-button>
      </div>
      <el-dialog title="显示要素" width="30%" :visible.sync="itemShowDialog">
        <el-checkbox v-for="e in tempOpen.PE.items.small" :label="e.name" :key="e.code" v-model="e.showFlag"></el-checkbox>
        <el-checkbox v-for="e in tempOpen.PE.items.big" :label="e.name" :key="e.code" v-model="e.showFlag"></el-checkbox>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import { mapGetters } from 'vuex'
  import CheckAnalysis from '@/components/CheckAnalysis'

  export default {
    name: 'PhysicalExamination',
    components: {
      CheckAnalysis
    },
    data() {
      return {
        itemShowDialog: false,
        chartDialog: false
      }
    },
    methods: {
    },
    beforeCreate() {
    },
    computed: {
      ...mapGetters([
        'tempOpen'
      ])
    },
    filters: {
      toInt(val) {
        if (typeof val == 'string') {
          return parseInt(val)
        } else {
          return val
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-dialog__body {
    display: table-caption;
    line-height: 30px;
  }
  .el-slider__runway {
    width: 500px;
  }
  .num-input {
    width: 35px;
    border: 1px solid #c1c1c1;
    border-radius: 2px;
    padding: 2px;
    margin: 2px;
  }
  .el-header {
    display: flex;
    align-items: center;
  }
  .left-div {
    width: 15%;
    background-color: #fafafc;
    padding: 10px;
    .el-checkbox {
      float: right;
    }
  }
  .middle-div {
    width: 85%;
    padding: 10px;
    position: relative;
    span {
      margin-right: 15px;
    }
  }
  .row-div {
    display: flex;
    border-bottom: 1px solid #d8dde2;
  }
  .card-div {
    padding: 0 5px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    * {
      margin-right: 10px;
    }
  }
  .align-right {
    text-align: right;
  }
  .echarts {
    width: 100%;
    height: 400px; /* or e.g. 400px */
  }
</style>